import React from 'react'
import {Button, message, Modal} from 'antd';
import {SortableContainer, SortableElement,arrayMove} from 'react-sortable-hoc';
import {WeaDialog, WeaLocaleProvider, WeaTools,WeaSearchGroup} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const SortableItem = SortableElement(({_index,item,setting,onAdd,onDelete,type}) => {
    const {col,imgWidth,imgHeight,titleFontSize,titleColor} = setting
    const {id,setting:_setting={}} = item
    const {title,img,url} = _setting

    let dynamicCssContent = {
        width: imgWidth+'px',
    }
    let dynamicCssImg = {
        width: imgWidth+'px',
        height: imgHeight+'px'
    }

    let tool = null
    if(type == 'view'){

    }else if(type == 'selected'){
        tool = (
            <div className='customFeatures-userSetting-AppMenu-delete'
                 onClick={(e)=>{
                     onDelete(id);
                     const event = e.target
                     if(event && event.stopPropagation){
                         event.stopPropagation();  //  w3c 标准
                     }else{
                         event.cancelBubble = true;  // ie 678  IE浏览器
                     }
                 }}
            >
                <i className='icon-coms-Narrow'></i>
            </div>
        )
    }else if(type == 'noSelected'){
        tool = (
            <div className='customFeatures-userSetting-AppMenu-add'
                 onClick={(e)=>{
                     onAdd(id);
                     const event = e.target
                     if(event && event.stopPropagation){
                         event.stopPropagation();  //  w3c 标准
                     }else{
                         event.cancelBubble = true;  // ie 678  IE浏览器
                     }
                 }}
            >
                <i className='icon-coms-Enlarge'></i>
            </div>
        )
    }

    return (
        <div className='customFeatures-userSetting-appMenu' style={{width:parseInt(100/col)+'%'}}>
            <div className={'customFeatures-userSetting-appMenu-content '+type} style={dynamicCssContent}>
                {
                    img ? (
                        <img className='customFeatures-userSetting-appMenu-img' src={img} style={dynamicCssImg}/>
                    ) : null
                }
                {tool}
                <div className='customFeatures-userSetting-appMenu-title' style={{color:titleColor,'font-size':titleFontSize+'px'}}>{title}</div>
            </div>

        </div>
    )

});

const SortableList = SortableContainer(({start,items,setting,onAdd,onDelete,type}) => {
    return (
        <div className="customFeatures-userSetting-appMenus">
            {items.map((item, index) => (
                <SortableItem ecId={`${this && this.props && this.props.ecId || ''}_SortableItem@pmfzhz@${item.id}`} key={`item-${item.id}`} index={index} _index={index} item={item} setting={setting} onAdd={onAdd} onDelete={onDelete} type={type} />
            ))}
        </div>
    );
});

export default class UserSetting extends React.Component{

    state={
        visiable : false,
    }

    render(){
        const {visiable} = this.state
        const {selectedItems=[],noSelectedItems=[],setting={},onAdd,onDelete,userJavaInterface} = this.props

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@sc8q9o`}
                title={getLabel(30747, '设置')}
                iconBgcolor='#1a57a0'
                style={{width: 900,height : 500}}
                hasScroll={true}
                visible={visiable}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@y7e8qm`} title={getLabel(83303, '已选')} needTigger={true} showGroup={true}>
                    <div className="customFeature-selected">
                        <SortableList ecId={`${this && this.props && this.props.ecId || ''}_SortableList@zf7rba`} axis={'xy'} items={selectedItems} setting={setting} onAdd={onAdd}  onDelete={onDelete} onSortEnd={this.onSortEnd} type='selected' shouldCancelStart={this.shouldCancelStart}/>
                    </div>
                </WeaSearchGroup>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@unnf2q`} title={getLabel(83302, '待选')} needTigger={true} showGroup={true}>
                    <div className="customFeature-selects">
                        <SortableList ecId={`${this && this.props && this.props.ecId || ''}_SortableList@udw866`} axis={'xy'} start={0}  items={noSelectedItems} setting={setting} onAdd={onAdd}  onDelete={onDelete}  onSortEnd={this.onSortEnd} type='noSelected' shouldCancelStart={this.shouldCancelStartFalse} />
                    </div>
                </WeaSearchGroup>
            </WeaDialog>
        )

    }
    onSortEnd = ({oldIndex, newIndex}) => {
        const {elementId,selectedItems,setCustomStateData,onDrop} = this.props
        if(oldIndex != newIndex){
            let data = {
                elementId: elementId,
                oldTabId: selectedItems[oldIndex].id,
                newTabId: selectedItems[newIndex].id
            }
            onDrop(data)
            const _selectedItems = arrayMove(selectedItems, oldIndex, newIndex)
            setCustomStateData({
                selectedItems: _selectedItems
            })
        }


    }

    shouldCancelStart(e) {

        const className = e.target.className;
        if (className === 'customFeatures-userSetting-appMenu-img' || className === 'customFeatures-userSetting-appMenu-title' || className === 'customFeatures-userSetting-appMenus') {
            return false
        }
        return true
    }

    shouldCancelStartFalse(e) {
       return true
    }

    onCancel = ()=>{
        const {stack,onSave,setCustomStateData} = this.props
        if(stack.length > 0){
            Modal.confirm({
                title: getLabel(15172, '系统提示'),
                content: '是否需要保存?',
                onOk: () => {
                    onSave()
                },
                onCancel: ()=>{
                    setCustomStateData({stack:[]})
                    this.onClose()
                }
            });
        }else{
            this.onClose()
        }

    }

    onShow = ()=>{
        this.setState({visiable :true})
    }

    onClose = ()=>{
        const {onCustomLoad} =this.props
        onCustomLoad()
        this.setState({visiable: false})
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8t8o2g@OK`} type="primary" onClick={this.props.onSave}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pg21yj@Close`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

}